<template>
  <van-nav-bar title="首页" />

  <div class="wrap">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      background="transparent"
      shape="round"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>

  <van-grid>
    <van-grid-item text="每日福利">
      <template #icon>
        <img src="../../../assets/images/a.png" alt="" />
      </template>
    </van-grid-item>

    <van-grid-item icon="photo-o" text="热销榜" />
    <van-grid-item icon="photo-o" text="每日福利" />
    <van-grid-item icon="photo-o" text="热销榜" />
  </van-grid>

  <van-grid column-num="2" gutter="10">
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
  </van-grid>

  <div style="padding: 0 10px">
    <van-card
      v-for="item in productList"
      :price="item.currentPrice"
      :title="item.productName"
      :thumb="item.imgUrl"
      :origin-price="item.originalPrice"
      :key="item.productId"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const bannerList = ref([]);
onMounted(() => {
  fetch("http://www.pudge.wang:4000/home/banner")
    .then((response) => response.json())
    .then((res) => {
      console.log(res);
      bannerList.value = res.result.list;
    });
});

const value = ref("");

// 商品列表
const productList = ref([]);
const getList = () => {
  fetch("http://www.pudge.wang:4000/home/recommend", {
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      count: 3,
      page: 1,
    }),
  })
    .then((response) => {
      return response.json();
    })
    .then((res) => {
      console.log(res);
      productList.value = res.result.list;
    });
};
onMounted(() => {
  getList();
});
</script>

<style lang="less" scoped>
.wrap {
  position: relative;
  .my-swipe .van-swipe-item {
    height: 200px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  :deep(.van-swipe__indicator) {
    width: 30px;
    height: 5px;
    border-radius: 0;
  }

  .van-search {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
  }

  :deep(.van-search__content) {
    background-color: rgba(255, 255, 255, 0.5);
  }

  :deep(.van-field__control::placeholder) {
    color: #fff;
  }
}
</style>
